import React from 'react';
import { Search, Bell, ChevronRight, Gift, Film, MessageCircle } from 'lucide-react';

const Home = () => {
  return (
    <div className="flex flex-col h-full pb-16">
      {/* 头部搜索栏 */}
      <div className="wx-header">
        <div className="wx-header-title">粉丝圈</div>
      </div>
      
      <div className="wx-content">
        {/* 搜索框 */}
        <div className="bg-green-500 px-4 pt-2 pb-3">
          <div className="flex items-center bg-white rounded-full px-3 py-1.5">
            <Search size={18} className="text-gray-400 mr-2" />
            <input 
              type="text" 
              placeholder="搜索物料、活动、用户" 
              className="bg-transparent border-none outline-none flex-1 text-sm"
            />
          </div>
        </div>

        {/* 轮播图 */}
        <div className="bg-white p-4">
          <div className="bg-gray-200 rounded-lg h-40 flex items-center justify-center">
            <p className="text-gray-500">轮播图展示区域</p>
          </div>
        </div>

        {/* 功能导航 */}
        <div className="bg-white mt-2 p-4 grid grid-cols-4 gap-4">
          <div className="flex flex-col items-center">
            <div className="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mb-1">
              <Gift size={24} className="text-red-500" />
            </div>
            <span className="text-xs">物料交换</span>
          </div>
          <div className="flex flex-col items-center">
            <div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mb-1">
              <Film size={24} className="text-blue-500" />
            </div>
            <span className="text-xs">观影包场</span>
          </div>
          <div className="flex flex-col items-center">
            <div className="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mb-1">
              <Bell size={24} className="text-green-500" />
            </div>
            <span className="text-xs">活动通知</span>
          </div>
          <div className="flex flex-col items-center">
            <div className="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mb-1">
              <MessageCircle size={24} className="text-purple-500" />
            </div>
            <span className="text-xs">粉丝社区</span>
          </div>
        </div>

        {/* 热门物料 */}
        <div className="bg-white mt-2 p-4">
          <div className="flex justify-between items-center mb-3">
            <h3 className="font-medium">热门物料</h3>
            <div className="flex items-center text-gray-500 text-sm">
              <span>查看更多</span>
              <ChevronRight size={16} />
            </div>
          </div>
          <div className="grid grid-cols-2 gap-3">
            {[1, 2, 3, 4].map((item) => (
              <div key={item} className="bg-gray-50 rounded-lg overflow-hidden">
                <div className="h-32 bg-gray-200"></div>
                <div className="p-2">
                  <p className="text-sm font-medium truncate">明星周边限量卡片</p>
                  <div className="flex justify-between items-center mt-1">
                    <span className="text-xs text-gray-500">北京</span>
                    <span className="text-xs text-red-500">急需交换</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 最新观影活动 */}
        <div className="bg-white mt-2 p-4">
          <div className="flex justify-between items-center mb-3">
            <h3 className="font-medium">最新观影活动</h3>
            <div className="flex items-center text-gray-500 text-sm">
              <span>查看更多</span>
              <ChevronRight size={16} />
            </div>
          </div>
          <div className="space-y-3">
            {[1, 2].map((item) => (
              <div key={item} className="bg-gray-50 rounded-lg overflow-hidden">
                <div className="h-32 bg-gray-200"></div>
                <div className="p-3">
                  <p className="font-medium">《新电影》粉丝见面会</p>
                  <p className="text-sm text-gray-500 mt-1">时间：2025年6月15日 19:00</p>
                  <p className="text-sm text-gray-500">地点：北京市朝阳区某影城</p>
                  <div className="flex justify-between items-center mt-2">
                    <div className="flex items-center">
                      <div className="flex -space-x-2">
                        {[1, 2, 3].map((avatar) => (
                          <div key={avatar} className="w-6 h-6 rounded-full bg-gray-300 border border-white"></div>
                        ))}
                      </div>
                      <span className="text-xs text-gray-500 ml-1">已有24人报名</span>
                    </div>
                    <button className="bg-green-500 text-white text-xs px-3 py-1 rounded-full">
                      立即报名
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Home;